<template>
  <div id="activity">
    <div class="activity_up">
      <div
        class="activity_item"
        v-for="(item, index) in activity_item"
        :key="index"
        @click="to_activity_detailed(index)"
      >
        <span>{{ item.title }}</span>
        <span>{{ item.description }}</span>
        <img :src="item.coverPicture" alt="" />
        <div>
          <div>
            <img src="../../../assets/icon/Visits.png" alt="" />
            <span>{{ item.readNum }}</span>
            <div>{{ item.createTime }}</div>
          </div>
        </div>
      </div>
    </div>
    <el-pagination
      background
      class="activity_down"
      layout="prev, pager, next"
      :page-count="page_count"
      @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {},
  components: {},
  data() {
    return {
      page: 1,
      page_count: 1,
      activity_item: [],
    };
  },
  methods: {
    to_activity_detailed(index) {
      console.log(index);
      this.$router.push(
        "/home/Daily/Daily_Activity_Management/Daily_Activity_Management_Detailed"
      );
      let detailed = {
        page: this.page,
        index: index,
      };

      // console.log(detailed);
      window.sessionStorage.setItem(
        "Activity_Detail_Page_index",
        JSON.stringify(detailed)
      );
    },
    //监听页码值改变的事件
    handleCurrentChange(newSize) {
      this.page = newSize;
      console.log(newSize);
      this.get_activity_information();
    },

    async get_activity_information() {
      const self = this;
      const { data: res } = await this.$http({
        headers: { "Content-Type": "application/json;charset=UTF-8" },
        method: "get",
        url: "/api/usual/getActivities",
        params: {
          page: self.page,
          pageSize: 6,
        },
      });
      console.log(res);
      this.page_count = res.msg.pages;
      this.activity_item = res.msg.records;
    },
  },
  created() {
    this.get_activity_information();
  },
};
</script>

<style lang="less" >
#activity {
  width: 98%;
  height: 100%;

  display: flex;

  flex-direction: column;
}

.activity_up {
  height: 92%;
  // overflow: auto;
  width: 94%;
  margin: 10px auto;
  display: flex;

  flex-wrap: wrap;
  padding-left: 60px;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 20px rgba(0, 0, 0, 0.04);
}
.activity_item {
  cursor: pointer;
  width: 30%;
  height: 46%;
  display: flex;
  flex-direction: column;
  justify-content: center;

  border: 1.5px solid rgb(82, 146, 192);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin: 20px 1%;
  span:nth-child(1) {
    font-weight: bold;
    font-size: 25px;
    width: 80%;
    margin: 0px auto;

    height: 40px;
    display: flex;
    line-height: 40px;
  }
  span:nth-child(2) {
    width: 80%;
    font-size: 16px;
    margin: 10px auto;
  }
  img {
    height: 213px;

    width: 80%;

    margin: 10px auto;
  }
  div {
    width: 80%;
    margin: 0px auto;
    display: flex;
    flex-direction: row;
    height: 40px;
    justify-content: space-between;

    div:nth-child(1) {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: center;

      img {
        height: 16px;
        width: 16px;
      }
      span {
        height: 40px;
        line-height: 40px;
        display: flex;
        margin: 0px;
        margin-left: 10px;
      }
      div {
        white-space: nowrap;
        display: inline-block;
      }
    }
  }
}
.activity_down {
  // background-color: rgb(121, 14, 14);
  height: 3%;
  width: 97%;
  display: flex;
  justify-content: end;
}
</style>